<!--新增列组件-->
<template>
    <el-dialog
        class="add-row"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        @close="handleClose"
        width="70%"
    >
        <div v-if="dialogVisible">
            <el-row class="input-row">
                <span style="font-weight: bold">新增列名</span>
                <el-input size="mini" placeholder="请输入列名" style="width: 20%" v-model="addRowName" @blur="addRowNameBlur(addRowName)"></el-input>
                <span class="addRowNameMsg">{{addRowNameMsg}}</span>
            </el-row>
            <el-row>
                <div class="condition-content" >
                    <el-tabs tab-position="left" style="height: 400px;" v-model="activeTab" @tab-click="handleClick">
                        <el-tab-pane label="公式/函数" name="1">
                            <el-row>
                                <el-col :span="2">
                                    <div class="firstCol1">
                                        <i :class="iconFlag? 'el-icon-d-arrow-left': 'el-icon-d-arrow-right'" @click.prevent="showFun">函数</i>
                                    </div>
                                </el-col>
                                <template v-if="iconFlag">
                                    <el-col class="firstCol2">
                                        <SearchTree :treeFlag="!iconFlag" @getFilterValue="saveFilterValue" :menuId="menuId" ref="searchTree"></SearchTree>
                                    </el-col>
                                </template>
                                <el-col :span="7" class="firstCol2">
                                    <SearchTree  @getFilterValue="saveFilterValue" :treeFlag="iconFlag" :menuId="menuId" ref="searchTree" @getColumnInfo="saveColumnInfo"></SearchTree>
                                </el-col>
                                <template v-if="iconFlag">
                                    <el-col :span="7">
                                        <function-area :styleChange='iconFlag' ref="functionArea" @getFunctionArea="getFunVal"  @dataValue="dataValue" :menuId="menuId"></function-area>
                                    </el-col>
                                </template>
                                <template v-else>
                                    <el-col :span="14">
                                        <function-area ref="functionArea" :treeValue="filterValue" @getFunctionArea="getFunVal" @dataValue="dataValue" :menuId="menuId"></function-area>
                                    </el-col>
                                </template>
                            </el-row>
                        </el-tab-pane>
                        <el-tab-pane label="时间差" name="2">
                        <time-difference ref="timeDifference" @getTimeDifference="saveTimeDifference" :menuId="menuId" @dataValue="dataValue"></time-difference>
                        </el-tab-pane>
                        <el-tab-pane label="获取时间" name="3">
                            <get-time ref="getTime" @getTimeValue="saveTimeValue" :menuId="menuId" @dataValue="dataValue"></get-time>
                        </el-tab-pane>
                        <el-tab-pane label="所有值/组内" name="4">
                            <all-values ref="allValues" :menuId="menuId" @getAllValues="saveAllValues" @dataValue="dataValue"></all-values>
                        </el-tab-pane>
                        <el-tab-pane label="累计值/组内" name="5">
                            <cumulative-value ref="cumulativeValue" :menuId="menuId" @getCumulativeValue="saveCumulativeValue" @dataValue="dataValue"></cumulative-value>
                        </el-tab-pane>
                        <el-tab-pane label="排名/组内" name="6">
                            <rank ref="rank" :menuId="menuId" @getRank="saveRank" @dataValue="dataValue"></rank>
                        </el-tab-pane>
                        <el-tab-pane label="分组赋值" name="7">
                            <grouping ref="grouping" :menuId="menuId" @getGrouping="saveGrouping" @dataValue="dataValue"></grouping>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-row>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="insertForm">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import SearchTree from './SearchTree'
    import FunctionArea from './FunctionArea'
    import TimeDifference from './TimeDifference'
    import GetTime from './getTime'
    import AllValues from './AllValues'
    import CumulativeValue from './CumulativeValue'
    import Rank from './Rank'
    import Grouping from './Grouping'
    import ajax from '@api/ajax'
    import {INSERT_ADDROW} from '@api/url'
    export default {
        name: 'AddRow',
        components: {
            FunctionArea,
            SearchTree,
            TimeDifference,
            GetTime,
            AllValues,
            CumulativeValue,
            Rank,
            Grouping
        },
        data () {
            return {
                addRowName: '',
                addRowNameMsg: '',
                dialogVisible: false,
                iconFlag: false,
                activeTab: '1', // 默认选中标签页
                filterValue: '',
                menuId: '', // 保存自助数据集ID
                columnInfo: [], // 保存树字段信息
                funVal: {}, // 保存公式函数回调值
                timeDifference: {}, // 保存时间差回调值
                getTimeValue: {}, // 保存获取时间回调值
                allValues: {}, // 保存所有值/组内回调值
                cumulativeValue: {}, // 保存累计值/组内回调值
                rankValue: {}, // 保存排名/组内回调值
                groupingValue: {}, // 保存分组赋值回调值
                dataValue: {}, //  保存新增列的反显对象
                treeValue: {}, // 保存树信息
                treeValue1: [],
                fieldId: '', // 保存新增列ID
                pageMode: 'ADD',
                functionMsg: '' // 公式函数表单校验
            }
        },
        methods: {
            openDialog (val) {
                this.fieldId = ''
                this.menuId = val
                this.dialogVisible = true
                this.pageMode = 'ADD'
                sessionStorage.setItem('pageMode', '')
            },
            editDialog (menuId, val) {
                debugger
                this.menuId = menuId
                this.dialogVisible = true
                this.addRowName = val.name
                this.fieldId = val.fieldId
                this.pageMode = 'EDIT'
                sessionStorage.setItem('pageMode', 'EDIT')
                // 通过返回的类型判断显示新增列的哪个功能
                if (val.type === '1') {
                    this.activeTab = '1'
                    this.dataValue = val
                    setTimeout(() => {
                        this.$refs.functionArea.editData(this.treeValue1, this.dataValue)
                    }, 1000)
                } else if (val.type === '2') {
                    this.activeTab = '2'
                    debugger
                    this.dataValue = val
                    setTimeout(() => {
                        this.$refs.timeDifference.editData(this.dataValue)
                    }, 1000)
                } else if (val.type === '3') {
                    this.activeTab = '3'
                    this.dataValue = val
                    setTimeout(() => {
                        this.$refs.getTime.editData(this.dataValue)
                    }, 1000)
                } else if (val.type === '4') {
                    this.activeTab = '4'
                    this.dataValue = val
                    setTimeout(() => {
                        debugger
                        this.$refs.allValues.editData(this.dataValue)
                    }, 1000)
                } else if (val.type === '5') {
                    this.activeTab = '5'
                    this.dataValue = val
                    setTimeout(() => {
                        this.$refs.cumulativeValue.editData(this.dataValue)
                    }, 1000)
                } else if (val.type === '6') {
                    this.activeTab = '6'
                    this.dataValue = val
                    setTimeout(() => {
                        this.$refs.rank.editData(this.dataValue)
                    }, 1000)
                } else if (val.type === '7' || val.type === '8' || val.type === '9') {
                    this.activeTab = '7'
                    this.dataValue = val
                    setTimeout(() => {
                        this.$refs.grouping.editData(this.dataValue)
                    }, 1000)
                }
            },
            handleClick (tab, event) {
                if (tab.name === '1') {
                    this.first()
                }
            },
            // 公式函数
            first () {

            },
            // 函数信息展开
            showFun () {
                if (this.iconFlag) {
                    this.iconFlag = false
                } else {
                    this.iconFlag = true
                }
            },
            // 关闭事件
            handleClose () {
                this.dialogVisible = false
                this.addRowName = ''
                this.addRowNameMsg = ''
                this.iconFlag = false
                this.activeTab = '1'
            },
            //
            saveFilterValue (val) {
                debugger
                this.treeValue1 = val.allTreeData
                if (val.treeFlag === true) {
                    this.$refs.functionArea.changeTreeFlag(val)
                    this.$refs.functionArea.appendValue(val, 'AggregateFunction')
                } else {
                    this.$refs.functionArea.changeTreeFlag(val.treeFlag)
                    this.$refs.functionArea.appendValue(val, 'group')
                }
            },
            // 保存树字段信息
            saveColumnInfo (val) {
                // 新增时保存树信息
                this.treeValue = val
                this.$refs.timeDifference.saveColumnInfo(val)
                this.$refs.getTime.saveColumnInfo(val)
                this.$refs.allValues.saveColumnInfo(val)
                this.$refs.cumulativeValue.saveColumnInfo(val)
                this.$refs.rank.saveColumnInfo(val)
                this.$refs.grouping.saveColumnInfo(val)
            },
            // 接收公式函数组件回调值
            getFunVal (val) {
                this.funVal = val
            },
            // 接收时间差组件回调值
            saveTimeDifference (val) {
                this.timeDifference = val
            },
            // 接收获取时间组件回调值
            saveTimeValue (val) {
                this.getTimeValue = val
            },
            // 接收所有值/组内回调值
            saveAllValues (val) {
                this.allValues = val
            },
            // 接收累计值/组内回调值
            saveCumulativeValue (val) {
                this.cumulativeValue = val
            },
            // 接收排名/组内回调值
            saveRank (val) {
                this.rankValue = val
            },
            // 接收分组赋值回调值
            saveGrouping (val) {
                this.groupingValue = val
            },
            // 新增列插入
           addRowInsert (param) {
                ajax.post(INSERT_ADDROW, param).then(res => {
                    debugger
                    let temp = {
                        pageMode: 'EDIT',
                        data: res.data
                    }
                    if (param.pageMode === 'EDIT') {
                        this.$emit('qryTable', temp)
                    } else {
                        this.$emit('qryTable', res.data)
                    }
                }).catch(error => {
                    console.error(error, '新增列插入失败！')
                }).finally(() => {
                    this.dialogVisible = false
                })
            },
            // 公式函数传参给新增接口
            funInsert () {
               let param = {
                   fieldId: this.fieldId,
                   modelId: this.menuId,
                   name: this.addRowName,
                   type: '1',
                   value1: this.funVal.value1,
                   value2: this.funVal.value2,
                   pageMode: this.funVal.pageMode
               }
               this.addRowInsert(param)
            },
            // 时间差传参给新增
            timeDifferenceInsert () {
                let param = {
                    fieldId: this.fieldId,
                    modelId: this.menuId,
                    name: this.addRowName,
                    type: '2',
                    value1: this.timeDifference.value1,
                    value2: this.timeDifference.value2,
                    value3: this.timeDifference.value3,
                    text: this.timeDifference.text,
                    pageMode: this.timeDifference.pageMode
                }
                this.addRowInsert(param)
            },
            // 获取时间传参给新增接口
            getTimeInsert () {
                let param = {
                    fieldId: this.fieldId,
                    modelId: this.menuId,
                    name: this.addRowName,
                    type: '3',
                    value1: this.getTimeValue.value1,
                    value2: this.getTimeValue.value2,
                    pageMode: this.getTimeValue.pageMode
                }
                this.addRowInsert(param)
            },
            // 所有值/组内传参给新增接口
            allValuesInsert () {
                let param = {
                    fieldId: this.fieldId,
                    modelId: this.menuId,
                    name: this.addRowName,
                    type: '4',
                    value1: this.allValues.value1,
                    value2: this.allValues.value2,
                    value3: this.allValues.value3,
                    text: this.allValues.text,
                    selects: this.allValues.selects,
                    ordered: this.allValues.ordered,
                    pageMode: this.allValues.pageMode
                }
                this.addRowInsert(param)
            },
            // 累计值/组内传参给新增接口
            cumulativeValueInsert () {
                let param = {
                    fieldId: this.fieldId,
                    modelId: this.menuId,
                    name: this.addRowName,
                    type: '5',
                    value1: this.cumulativeValue.value1,
                    value2: this.cumulativeValue.value2,
                    text: this.cumulativeValue.text,
                    selects: this.cumulativeValue.selects,
                    ordered: this.cumulativeValue.ordered,
                    pageMode: this.cumulativeValue.pageMode
                }
                this.addRowInsert(param)
            },
            // 排名/组内传参给新增接口
            rankInsert () {
                let param = {
                    fieldId: this.fieldId,
                    modelId: this.menuId,
                    name: this.addRowName,
                    type: '6',
                    value1: this.rankValue.value1,
                    value2: this.rankValue.value2,
                    text: this.rankValue.text,
                    selects: this.rankValue.selects,
                    ordered: this.rankValue.ordered,
                    pageMode: this.rankValue.pageMode
                }
                this.addRowInsert(param)
            },
            // 分组赋值传参给新增接口
            groupingInsert () {
                let param = {
                    fieldId: this.fieldId,
                    modelId: this.menuId,
                    name: this.addRowName,
                    type: '7',
                    value1: this.groupingValue.value1,
                    pageMode: this.groupingValue.pageMode
                }
                if (this.groupingValue.type === 'text') {
                    param.textGroups = this.groupingValue.textGroups
                    param.value2 = this.groupingValue.value2
                    param.subType = this.groupingValue.subType
                } else if (this.groupingValue.type === 'number' && this.groupingValue.method === '1') {
                    param.value2 = this.groupingValue.value2
                    param.numberGroups = this.groupingValue.numberGroups
                    param.subType = this.groupingValue.subType
                    param.min = this.groupingValue.min
                    param.max = this.groupingValue.max
                } else if (this.groupingValue.type === 'number' && this.groupingValue.method === '2') {
                    param.value3 = this.groupingValue.value3
                    param.numberGroup = this.groupingValue.numberGroup
                    param.subType = this.groupingValue.subType
                    param.min = this.groupingValue.min
                    param.max = this.groupingValue.max
                }
                this.addRowInsert(param)
            },
            // 保存表单值
            insertForm () {
                if (this.addRowName === '') {
                    this.addRowNameMsg = '新增列名不能为空！'
                    this.dialogVisible = true
                } else {
                    debugger
                    this.addRowNameMsg = ''
                    switch (this.activeTab) {
                        // 公式/函数
                        case '1':
                            if (this.funVal.value1 === '' || this.funVal.value1 === null || this.funVal.value1 === undefined) {
                                this.$refs.functionArea.changeMsg('请添加公式')
                                this.dialogVisible = true
                            } else {
                                this.funInsert()
                            }
                            break
                        // 时间差
                        case '2':
                            this.timeDifferenceInsert()
                            break
                        // 获取时间
                        case '3':
                            if (this.getTimeValue.value1 === '' || this.getTimeValue.value1 === null || this.getTimeValue.value1 === undefined) {
                                this.$refs.getTime.changeMsg('不可为空')
                                this.dialogVisible = true
                            } else {
                                this.getTimeInsert()
                            }
                            break
                        // 所有值/组内
                        case '4':
                            this.allValuesInsert()
                            break
                        // 累计值/组内
                        case '5':
                            this.cumulativeValueInsert()
                            break
                        // 排名/组内
                        case '6':
                            this.rankInsert()
                            break
                        // 分组赋值
                        case '7':
                            this.groupingInsert()
                            break
                    }
                }
            },
            // 新增列输入框事件
            addRowNameBlur (val) {
                if (val === '') {
                    this.addRowNameMsg = '新增列名不能为空！'
                } else {
                    this.addRowNameMsg = ''
                }
            },
            // 取消
            cancel () {
                // 清空公共新增列输入框
                this.dialogVisible = false
                this.addRowName = ''
                this.addRowNameMsg = ''
                // 清空公式/函数文本域
                this.$refs.searchTree.resetData()
            }
        },
        created () {
            this.iconFlag = false
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .add-row
        .input-row
            margin-bottom 20px
            .addRowNameMsg
                color red
        .condition-content
            width 100%
            height 400px
            border 1px solid #D8DCE5
            .firstCol1
                height 400px
                border-right  1px solid #D8DCE5
            .firstCol2
                height 400px
                width 25%
                border-right  1px solid #D8DCE5

</style>
